<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        
        <title>Section 508 and WCAG 2.0 Compliance | Kendo UI Accessibility Support</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn more about the Section 508 and WCAG 2.0 Accesibility support provided by Kendo UI controls.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("accessibility/section-508-wcag.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//accessibility/section-508-wcag.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="section-508-and-wcag-20-compliance"><a href="#section-508-and-wcag-20-compliance">Section 508 and WCAG 2.0 Compliance</a></h1>

<p>The Kendo UI widgets follow the <a href="https://www.w3.org/TR/WCAG/">W3C Web Content Accessibility Guidelines 2.0</a>.</p>

<p>They set the standards for applications for providing accessible content. Depending on the number of guidelines that is followed when building an application, W3C defines three levels of accessibility conformance—A, AA, and AAA levels.</p>

<p>The Kendo UI components also conform to the technical standards set out in Section 508 of the Rehabilitation Act. They represent the law that requires all Federal Agencies to make their electronic and information technology accessible to people with disabilities. For detailed information on the accessibility features according to the Section 508 Web content standards Kendo UI delivers, refer to the article about <a href="/accessibility/section-508">Section 508</a>.</p>

<p>Applications built with components that adhere to these guidelines will not only be accessible to people with disabilities, but also to users of all kinds of devices and interfaces such as desktop browser, voice browser, mobile phone, automobile-based personal computer, and so on.</p>

<p>The following table shows the Section 508 and WCAG 2.0 Compliance level of support for the Kendo UI widgets. The report is based on results from tests performed on our <strong>Basic Usage</strong> demos.</p>

<p><strong>Table 1: 508 and WCAG 2.0 compliance with Kendo UI widgets</strong></p>

<table>
<thead>
<tr>
<th align="left">Component</th>
<th align="left">508</th>
<th align="left">WCAG 2.0</th>
<th align="left">Demo</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">AutoComplete</td>
<td align="left">Yes</td>
<td align="left">AA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/autocomplete/index">Browse</a></td>
</tr>
<tr>
<td align="left">BarCode</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/barcode/index">Browse</a></td>
</tr>
<tr>
<td align="left">Button</td>
<td align="left">Yes</td>
<td align="left">AA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/button/index">Browse</a></td>
</tr>
<tr>
<td align="left">ButtonGroup</td>
<td align="left">Yes</td>
<td align="left">AA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/buttongroup/index">Browse</a></td>
</tr>
<tr>
<td align="left">Calendar</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/calendar/index">Browse</a></td>
</tr>
<tr>
<td align="left">Charts</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/chart-api/index">Browse</a></td>
</tr>
<tr>
<td align="left">ComboBox</td>
<td align="left">Yes</td>
<td align="left">AA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/combobox/index">Browse</a></td>
</tr>
<tr>
<td align="left">ColorPicker</td>
<td align="left">Yes</td>
<td align="left">AA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/colorpicker/index">Browse</a></td>
</tr>
<tr>
<td align="left">DateInput</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/dateinput/index">Browse</a></td>
</tr>
<tr>
<td align="left">DatePicker</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/datepicker/index">Browse</a></td>
</tr>
<tr>
<td align="left">DateTimePicker</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/datetimepicker/index">Browse</a></td>
</tr>
<tr>
<td align="left">Diagram</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/diagram/index">Browse</a></td>
</tr>
<tr>
<td align="left">Dialog</td>
<td align="left">Yes</td>
<td align="left">AA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/dialog/index">Browse</a></td>
</tr>
<tr>
<td align="left">DropDownList</td>
<td align="left">Yes</td>
<td align="left">AA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/dropdownlist/index">Browse</a></td>
</tr>
<tr>
<td align="left">Editor</td>
<td align="left">Yes</td>
<td align="left">AA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/editor/index">Browse</a></td>
</tr>
<tr>
<td align="left">Gantt</td>
<td align="left">Yes</td>
<td align="left">AA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/gantt/index">Browse</a></td>
</tr>
<tr>
<td align="left">Grid</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/grid/index">Browse</a></td>
</tr>
<tr>
<td align="left">LinearGauge</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/linear-gauge/index">Browse</a></td>
</tr>
<tr>
<td align="left">ListBox</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/listbox/index">Browse</a></td>
</tr>
<tr>
<td align="left">ListView</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/listview/index">Browse</a></td>
</tr>
<tr>
<td align="left">Map</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/map/index">Browse</a></td>
</tr>
<tr>
<td align="left">MaskedTextbox</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/maskedtextbox/index">Browse</a></td>
</tr>
<tr>
<td align="left">Menu</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/menu/index">Browse</a></td>
</tr>
<tr>
<td align="left">MediaPlayer</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/mediaplayer/index">Browse</a></td>
</tr>
<tr>
<td align="left">MultiSelect</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/multiselect/index">Browse</a></td>
</tr>
<tr>
<td align="left">Notification</td>
<td align="left">Yes</td>
<td align="left">AA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/notification/index">Browse</a></td>
</tr>
<tr>
<td align="left">NumericTextbox</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/numerictextbox/index">Browse</a></td>
</tr>
<tr>
<td align="left">PanelBar</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/panelbar/index">Browse</a></td>
</tr>
<tr>
<td align="left">PivotGrid</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/pivotgrid/index">Browse</a></td>
</tr>
<tr>
<td align="left">QRCode</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/qrcode/index">Browse</a></td>
</tr>
<tr>
<td align="left">RadialGauge</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/radial-gauge/index">Browse</a></td>
</tr>
<tr>
<td align="left">RadioButton</td>
<td align="left">Yes</td>
<td align="left">AA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/styling/radios">Browse</a></td>
</tr>
<tr>
<td align="left">Responsive Panel</td>
<td align="left">Yes</td>
<td align="left">AA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/responsive-panel/index">Browse</a></td>
</tr>
<tr>
<td align="left">ScrollView</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/scrollview/index">Browse</a></td>
</tr>
<tr>
<td align="left">Scheduler</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/scheduler/index">Browse</a></td>
</tr>
<tr>
<td align="left">Slider</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/slider/index">Browse</a></td>
</tr>
<tr>
<td align="left">Sortable</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/sortable/index">Browse</a></td>
</tr>
<tr>
<td align="left">Splitter</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/splitter/index">Browse</a></td>
</tr>
<tr>
<td align="left">Spreadsheet</td>
<td align="left">No</td>
<td align="left">-</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">Switch</td>
<td align="left">Yes</td>
<td align="left">AA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/switch/index">Browse</a></td>
</tr>
<tr>
<td align="left">TabStrip</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/tabstrip/index">Browse</a></td>
</tr>
<tr>
<td align="left">TimePicker</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/timepicker/index">Browse</a></td>
</tr>
<tr>
<td align="left">ToolBar</td>
<td align="left">Yes</td>
<td align="left">AA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/toolbar/index">Browse</a></td>
</tr>
<tr>
<td align="left">Tooltip</td>
<td align="left">Yes</td>
<td align="left">AA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/tooltip/index">Browse</a></td>
</tr>
<tr>
<td align="left">TreeList</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/treelist/index">Browse</a></td>
</tr>
<tr>
<td align="left">TreeView</td>
<td align="left">Yes</td>
<td align="left">AA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/treeview/index">Browse</a></td>
</tr>
<tr>
<td align="left">Upload</td>
<td align="left">Yes</td>
<td align="left">AA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/upload/index">Browse</a></td>
</tr>
<tr>
<td align="left">Window</td>
<td align="left">Yes</td>
<td align="left">AAA</td>
<td align="left"><a href="http://demos.telerik.com/kendo-ui/window/index">Browse</a></td>
</tr>
</tbody>
</table>

<h2 id="special-considerations"><a href="#special-considerations">Special Considerations</a></h2>

<p>Several Kendo UI widgets feature complex rendering which affects their accessibility standards support provisioned by Section 508.</p>

<h3 id="label-element-support"><a href="#label-element-support">Label Element Support</a></h3>

<p>Widgets, such as the ComboBox, MultiSelect, and NumericTextBox, hide their initial <code>input</code> or <code>select</code> element which breaks the <a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/label#attr-for"><code>label.for</code></a> focus functionality on click. In general, the browser cannot focus hidden elements. This results in the inability of the <code>label</code> element to focus the corresponding widget.</p>

<p><strong>Solution</strong></p>

<p>Place the widget inside the <code>label</code> element which in turn focuses the first visible element. Avoid using the <code>for</code> attribute because when it is applied to the <code>label</code> element, the respective widget does not focus. Instead, use the <code>aria-labelledby</code> attribute on the input to point to its wrapping <code>label</code> element:</p>

<h6>Example</h6>

<pre><code>  &lt;label id="label"&gt;
    Amount:
    &lt;input id="numerictextbox" aria-labelledby="label"/&gt;
  &lt;/label&gt;
  &lt;script&gt;
    $(function() {
      $("#numerictextbox").kendoNumericTextBox();
    });
  &lt;/script&gt;
</code></pre>

<h3 id="messages-support"><a href="#messages-support">Messages Support</a></h3>

<p>Widgets, such as the Grid and Calendar, require additional configuration to enable them to successfully pass the Section 508 validation. Due to the fact that they render their content in tables, each table header element should contain text. To achieve this behavior, use the <a href="/api/javascript/ui/grid#configuration-messages.expandCollapseColumnHeader"><code>messages.expandCollapseColumnHeader</code></a> and <a href="/api/javascript/ui/calendar#configuration-messages.weekColumnHeader"><code>messages.weekColumnHeader</code></a> configuration options.</p>

<p>The following example demonstrates how to specify a text for the expand/collapse column.</p>

<h6>Example</h6>

<pre><code>    &lt;div id="grid"&gt;&lt;/div&gt;
    &lt;script&gt;
    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      dataSource: {
        data: [
          { name: "Jane Doe", age: 30, city: "London" },
          { name: "John Doe", age: 33, city: "Berlin" }
        ]
      },
      detailInit: function (e) {
        e.detailCell.text("City: " + e.data.city);
      },
      height: 200,
      messages: {
        expandCollapseColumnHeader: "E/C"
      }
    });
    &lt;/script&gt;
</code></pre>

<p>The following example demonstrates how to specify a text for the week column header.</p>

<h6>Example</h6>

<pre><code>    &lt;div id="calendar"&gt;&lt;/div&gt;
    &lt;script&gt;
    $("#calendar").kendoCalendar({
        "weekNumber": true,
        "messages": {
            "weekColumnHeader": "W"
        }
     })
    &lt;/script&gt;
</code></pre>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<ul>
<li><a href="/accessibility/accessibility-overview">Overview of Accessibility Features in Kendo UI</a></li>
<li><a href="/accessibility/section-508">Section 508 Support in Kendo UI</a></li>
<li><a href="/accessibility/wai-aria-support-in-kendo">WAI-ARIA Support in Kendo UI</a></li>
<li><a href="/accessibility/keyboard-support">Keyboard Support in Kendo UI</a></li>
<li><a href="/accessibility/supporting-rtl-languages">Right-to-Left Language Support in Kendo UI</a></li>
<li><a href="/accessibility/high-contrast-theme">Working with the Kendo UI High-Contrast Theme</a></li>
<li><a href="/accessibility/five-tips-for-accessible-charts-with-dataviz">Five Tips for Accessible Charts with Kendo UI</a></li>
</ul> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

